<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.org/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="/resources/layui/css/layui.css">
</head>
<body>
<script src="/resources/layui/layui.js"></script>

<script th:inline="none">
    //一般直接写在一个js文件中
    layui.use(['layer', 'form','table'], function(){
        var layer = layui.layer
            ,form = layui.form
            ,table = layui.table
            ,$=layui.jquery;
        //引入表格，使用表格
        var userTable=table.render({
            elem:'#userTable',
            height:600,
            url:'/user/userList',
            id:'userListTable',
            page:true,
            limits:[5,10,15,20],
            limit:5,
            cols:[[
                {field:'id',title:'编号',width:80,type:'checkbox'},
                {field: 'telephone', title: '电话'},
                {field: 'name', title: '姓名'},
                {field: 'sex', title: '性别'},
                {field: 'birthday', title: '生日'},
                {field: 'entry', title: '入职时间'},
                {field: 'statues', title: '状态',templet:function (obj) {
                    return obj.statues==1?"在职":"休假";
                }},
                {field: 'dictionary', title: '职位',templet:function (obj) {

                    return obj.dictionary.name;
                }},
                {field: 'dept', title: '部门',templet:function (obj) {
                    console.log(obj)
                    return obj.dept.name;
                }},
                {title: '操作', width:250,templet:'#usersListBar',fixed:"right",align:"center"}
            ]]
        })
        //进入分配角色页面
        table.on("tool(usersList)",function (obj){
            //获取当前行的数据
            var data=obj.data;
            var id=data.id;
            switch (obj.event){
                case 'grantRole':
                    console.log("**********")
                    var index=layer.open({
                        type:2,
                        title:'分配角色',
                        content:'/goRoles',
                        area: ['500px', '300px'],
                        success:function (layero,index) {
                            //少了这个是不能从父页面向子页面传值的
                            var body=layer.getChildFrame('body',index)
                            //这样就将值传递给子页面中id为userIdHiden的隐藏域
                            body.find("#userId").val(data.id);
                        },
                        btn:['确定','取消']
                        ,yes:function (index,layero) {
                            var res=window["layui-layer-iframe"+index].callbackdata();
                            var rids=new Array();
                            for (var i=0;i<res.length;i++){
                                rids.push(res[i].id);
                            }
                            console.log("*******"+rids);
                            $.ajax({
                                url:'/user/assignRole',
                                data:{
                                    uid:data.id,
                                    rids:rids,
                                },
                                traditional:true,
                                success:function () {
                                    layui.layer.close(index);
                                }
                            })
                        },
                        btn2:function (index,layero) {
                            console.log("关闭");
                            layui.layer.close(index);
                        }

                    });
                    break;
                case 'edit':
                    var updateindex=layer.open({
                        type:2,
                        title:'修改用户',
                        content:'/updateuser/'+id,
                        area:['700px','520px'],
                        success:function (layero,index) {
                            var body=layer.getChildFrame('body',updateindex)
                            console.log(data)
                            body.find("#sexid").val(data.sex);
                            body.find("#telephone").val(data.telephone);
                            body.find("#name").val(data.name);
                            body.find("#birthday").val(data.birthday);
                            body.find("#dept").val(data.dept.id);
                            body.find("#empId").val(data.dictionary.id);
                            body.find("#entry").val(data.entry);
                            body.find("#statuesid").val(data.statues);
                            body.find("#availid").val(data.available);
                            body.find("#uid").val(data.id);
                        },
                    })
                    break;
                case 'del':
                    layer.confirm('确定删除用户',{icon:3,title:'提示信息'},function (index) {
                        $.ajax({
                            type:'post',
                            url:'/user/dellUser'+id,
                            success:function () {
                                //刷新表单
                                userTable.reload();
                                //关闭提示框
                                layer.close(index)
                            }
                        })
                    })
            }
        })
        //增加用户
        $("#addPatch").click(function () {
            var addindex=layer.open({
                type:2,
                title:'增加用户',
                content:'/adduser',
                area:['700px','520px'],
                success:function (layero,index) {

                },
            })
        });
        //批量删除
        $("#removePatch").click(function () {
            //获取所选复选框的集合
            var check=table.checkStatus('userListTable')
            var data=check.data;
            var ids=new Array();
            if(data.length==0){
                layer.msg("至少选择一个")
            }else {
                for (var i = 0; i < data.length; i++) {
                    ids.push(data[i].id)
                }
                layer.confirm('确定删除用户',{icon:3,title:'提示信息'},function (delindex) {
                    $.ajax({
                        type:"post",
                        url:"/user/deleteAllPath",
                        data:{ids:ids},
                        traditional:true,
                        success:function () {
                            //关闭提示框
                            layer.close(delindex)
                            //刷新表单
                            userTable.reload();
                        }
                    })
                })
            }
        })
        //搜索功能
        $(".searchBtn").click(function () {
            var telephone=$("#telephone").val()
            var name=$("#name").val()
            table.reload("userListTable",{url:'/user/userList?telephone='+telephone+"&name="+name})
        })
    });
</script>

<blockquote class="layui-elem-quote quoteBox">
    <form class="layui-form" action="">
        <div class="layui-inline">
            <input type="text" class="layui-input" id="telephone" placeholder="请输入电话号码">
        </div>
        <div class="layui-inline">
            <input type="text" class="layui-input" id="name" placeholder="请输入姓名">
        </div>

        <div class="layui-inline">
            <button type="button" class="layui-btn searchBtn">
                搜索
            </button>
        </div>
        <div class="layui-inline">
            <shiro:hasPermission name="user:delectall">
                <button type="button" class="layui-btn" id="removePatch">
                    批量删除
                </button>
            </shiro:hasPermission>
        </div>

        <div class="layui-inline">
            <shiro:hasPermission name="user:add">
                <button type="button" class="layui-btn" id="addPatch">
                    增加
                </button>
            </shiro:hasPermission>
        </div>
    </form>
</blockquote>

<table id="userTable" lay-filter="usersList">
    <!--操作-->
    <script id="usersListBar" type="text/html">
        <shiro:hasPermission name="user:edit">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        </shiro:hasPermission>

        <shiro:hasPermission name="user:delete">
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
        </shiro:hasPermission>

        <shiro:hasPermission name="user:look">
            <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="look">预览</a>
        </shiro:hasPermission>

        <shiro:hasPermission name="user:grant">
            <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="grantRole">分配角色</a>
        </shiro:hasPermission>
    </script>
</table>

</body>
</html>